<template>
  <div>
    <button @click="f">+++++</button>
    <h1>{{ name }}--{{ age }}---{{ str }}---{{ obj }}</h1>
    <h2>6666-{{ name2 }}</h2>
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <div>
      <input type="checkbox" v-model="checkAll" />
      <p v-for="item in ary">
        <input type="checkbox" v-model="item.checked" />
      </p>


    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch, ref, toRef, effect } from 'vue'

export default {
  props: ['count'],
  emits: ['update:count'],
  setup(props, { emit }) {
    console.log(props.count)
    let userInfo = reactive({
      name: "珠峰",
      age: 13,
      obj: {
        n: 100
      }
    })
    let state = reactive({
      ary: [{ checked: true }, { checked: false }, { checked: true }]
    })
    let oo = userInfo.obj
    const f = () => {
      emit('update:count', props.count + 1)
      oo.n++
    }

    let str = computed(() => {
      return `姓名是${userInfo.name};年龄是${userInfo.age}`
    })
    let checkAll = computed({
      get() {
        return state.ary.every(item => item.checked)
      },
      set(val) {
        state.ary.forEach(item => item.checked = val)
      }
    })
    // 一般 当被监听的内容是一个普通值的时候 需要使用箭头函数返回的格式
    watch(() => userInfo.obj, (newV, oldV) => {
      console.log(newV, oldV)
    }, { deep: true })
    watch(userInfo.obj, (newV, oldV) => {
      console.log(newV, oldV)
    })
    // let name2 = toRef(userInfo, 'name') 
    //把userInfo中的name 复制一份变成响应式数据 ;name2会保持对userInfo.name的依赖性

    let name2 = ref(userInfo.name) //把userInfo中的name 复制一份变成响应式数据 
    let name3 = userInfo.name // 把userInfo中的name 复制一份

    console.log(name2)
    watch(name2, () => {
      console.log(7777)
    })
    let a = ref(1);
    let a2 = { qq: 1 }
    watch(a, () => {
      console.log(6666)
    })
    setInterval(() => {
      a.value++
    }, 2000);

    effect(() => {
      let a = userInfo.name;
      console.log(a)
    })
    return {
      f,
      ...toRefs(userInfo),
      str,
      ...toRefs(state),
      checkAll,
      name2
    }
  }
}
</script>

<style lang="scss" scoped>
</style>